<template>
  <div class="printTicket" ref="printTicket">
    <div class="content">
      <div id="TicketTable" ref="TicketTable">
        <div class="qrcode">
          <qrCode :id="id" :workflow_name="workflow_name"></qrCode>
          <p>用钉钉扫码</p>
        </div>
        <p class="title">{{workflow_name}}</p>
        <p>
          <span>申请时间：{{gmt_created}}</span>
        </p>
        <table border="1"  cellpadding="0" cellspacing="0" style="width:100%;">
          <tr v-for="(item,index) in field_list" :key="index">
            <!-- item.label.type == 'sub_table  则显示的是子清单的标题 所以合并td-->
            <td style="width:30%;line-height:30px;" :colspan="item.label.type == 'sub_table'?2:1">&nbsp;&nbsp;{{item.field_name}}</td> 
            <td style="width:70%;line-height:30px;" v-if="item.label.type != 'sub_table'">&nbsp;&nbsp;{{item.field_value}}</td>
          </tr>
        </table>
        <table border="1"  cellpadding="0" cellspacing="0" style="width:100%;border-top:none;" v-if="ticketLogs_list.length>0">
          <tr>
            <td :rowspan="ticketLogs_list.length" style="width:30%;line-height:30px;">&nbsp;&nbsp;审批流程</td>
            <td style="line-height:30px;margin:0;width:70%;">
              <p v-if="ticketLogs_list[0].transition.transition_name">{{ticketLogs_list[0].transition.transition_name}}</p>
              <p v-if="ticketLogs_list[0].textarea_value">{{ticketLogs_list[0].textarea_value}}</p>
              <p>{{ticketLogs_list[0].participant_info.participant_alias}} &nbsp;&nbsp;&nbsp;<span>{{ticketLogs_list[0].gmt_created}}&nbsp;&nbsp;</span></p>
            </td>
          </tr>
          <tr v-for="(item,index) in ticketLogs_list.slice(1)" :key="index">
            <td style="line-height:30px;width:70%;" >
              <p v-if="item.transition.transition_name">{{item.transition.transition_name}}</p>
              <p v-if="item.textarea_value">{{item.textarea_value}}</p>
              <p>{{item.participant_info.participant_alias}} &nbsp;&nbsp;&nbsp;<span>{{item.gmt_created}}&nbsp;&nbsp;</span></p>
            </td>
          </tr>
        </table>
        <div class="img_box">
          <van-image
            v-for="(item,index) in urlList"
            :key="index" 
            @click="previewImg(urlList,index)"
            fit="contain"
            lazy-load
            :src="item + '?imageMogr2/thumbnail/400x/format/jpg/interlace/0/quality/80'"
          />
        </div>
      </div>
    </div>
    <div class="foot" @click="ExportSavePdf(id,workflow_name)">
      <p class="icon-image iconfont icon-dayin1"></p>
      打印
    </div>
    <div class="loading" v-show="$store.state.loading">
      <van-loading type="spinner" color="#1989fa">打印中...</van-loading>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import moment from 'moment'
import qrCode from '@/components/qrCode.vue'
export default {
  data () {
    return {
      id:'',
      field_list:[],
      ticketLogs_list:[],
      imgHight:0,
      gmt_created:"",
      workflow_name:"",
      urlList:[],
    }
  },
  components:{
    qrCode,
  },
  created(){
    if(this.$route.query.workflow_name){
      this.workflow_name = this.$route.query.workflow_name
    }else{
    //获取工单列表数据
    let params = {
      workflow_ids:this.$route.query.workflow_id,
      category:"all"
    }
      this.$store.dispatch('api_get_ticket_list',params).then(res=>{
        this.workflow_name = res.data.data.value[0].workflow_info.workflow_name
      }).catch(err=>{
        console.log(err)
      })
    }
    
    this.gmt_created = moment(this.$route.query.gmt_created).format('YYYY-MM-DD hh:mm') 
    this.id = this.$route.query.id
    let _list = JSON.parse(this.$route.query.field_list)
    _list.forEach((item,index)=>{
      this.handleFormData(item) //父表单数据处理
      this.field_list.push(item)
      if(item.field_type_id === 55 && item.label.type === 'sub_table'){ //子表单数据处理
        item.field_value[0].forEach((val,j)=>{
          this.handleFormData(val)
          this.field_list.push(val)
        })
      }
    })

    //获取工单流程
    let data = {
      id:this.id,
      page:1,
      per_page:10,
    }
    this.$store.dispatch('api_get_ticket_flowlogs',data).then(res=>{
      if(res.status == 200){
        this.ticketLogs_list = []
        res.data.data.value.forEach((item,index)=>{
          this.ticketLogs_list.push(item)
        })
        //因为工单log是分页处理，所以做个判断。当前获取到的数据少于总条数，则再请求一次
        if(res.data.data.total > this.ticketLogs_list.length){
          data.per_page = res.data.data.total - data.per_page
          this.$store.dispatch('api_get_ticket_flowlogs',data).then(res=>{
            res.data.data.value.forEach((item,index)=>{
              this.ticketLogs_list.push(item)
            })
            this.handleSuggestion()
          })
        }else{
          this.handleSuggestion()
        }
      }
    })

  },
  mounted(){
    
  },
  destroyed(){
    this.$store.state.loading = false
  },
  methods:{
    previewImg(urlList,j){
      ImagePreview({
        images: urlList,
        startPosition: j,
        closeOnPopstate:true,
      });
    },
    handleFormData(item){//处理表单数据
      if(item.field_type_id == 70){//多选用户
        let text = ""
        if(item.field_value){
          item.field_value.forEach((val,j)=>{
          text += val.alias + '、'
          })
        }
        item.field_value = text
      }
      if(item.field_type_id == 60 ){//单选用户
        item.field_value = item.field_value?item.field_value.alias:""
      }
      if(item.field_type_id == 50){//多选下拉列表
        let text = ""
        try{
          item.field_value.forEach((obj,i)=>{
            text += JSON.parse(item.field_choice)[obj] + '、'
          })
        }catch(e){
          item.field_value.forEach((obj,i)=>{
            text += item.field_choice[obj] + '、'
          })
        }
        item.field_value = text
      }
      if(item.field_type_id == 40){//多选框
        try{
          let text = ""
          item.field_value.forEach((val,j)=>{
            text += JSON.parse(item.field_choice)[val] + "、"
          })
          item.field_value = text
        }catch(e){
          let text = ""
          item.field_value.forEach((val,j)=>{
            text += item.field_choice[val] + "、"
          })
          item.field_value = text
        }
        
      }
      if(item.field_type_id == 35){//单选框
        try{
          item.field_value = JSON.parse(item.field_choice)[item.field_value]
        }catch(e){
          item.field_value = item.field_choice[item.field_value]
        }
      }
      if(item.field_type_id == 45){//下拉列表
        try{
          item.field_value = JSON.parse(item.field_choice)[item.field_value]
        }catch(e){
          item.field_value = item.field_choice[item.field_value]
        }
      }
      if(item.field_type_id == 80 && item.field_value != ""){//附件
        let text = ""
        item.field_value.forEach((val,j)=>{
          text += val + '、'
          this.urlList.push(val)
        })
        item.field_value = text
      }
      
      if(item.field_type_id === 55 && item.label.type === 'select'){//根据url选择
        let _type = JSON.parse(item.field_template).type
        let key = JSON.parse(item.field_template).lable
        if(_type == "single"){//单选
          item.field_value = item.field_value[key]
        }else{               //多选
          let _val = ""
          item.field_value.forEach(j=>{
            _val += `${j[key]}、`
          })
          item.field_value = _val  
        }
      }
      
    },
    handleSuggestion(){
      this.ticketLogs_list.forEach((item,index) => {
        item.textarea_value = ''
        item.urlList = []
        item.users = []
        item.type = 'comment'
        if(item.suggestion){
          try {
            let suggestion = JSON.parse(item.suggestion)
            item.textarea_value = suggestion.textarea_value
            item.urlList = suggestion.urlList
            item.users = suggestion.users
            item.type = suggestion.type
          } catch(e) {
            item.textarea_value = item.suggestion
          }
        }
      });
    },
  }
}
</script>

<style lang='less' scoped>
.printTicket{
  position: absolute;
  top:0;
  bottom: 0;
  width: 100%;
  background: #fff;
  .content{
    padding: 0.2rem;
    position: absolute;
    top: 0;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow: scroll;
    #TicketTable{
      position: relative;
      padding-top: 1.6rem;
      width: 100%;
      height: auto;
      .qrcode{
        position: absolute;
        top:0.2667rem;
        right: 0.2667rem;
        p{
          margin:0;
          text-align: center;
        }
      }
      .title{
        font-size: 16px;
        text-align: center
      }
      tr{
        border-color: #666;
        td{
          word-break: break-all;
          p{
            padding: 0 0.1333rem;
            margin:0;
            span{
              float: right;
            }
          }
        }
      }
      .img_box{
        display: flex;
        flex-wrap: wrap;
        .van-image{
          flex:0 0 48%;
          padding: 1%;
        }
      }
    }
  }
  .content::-webkit-scrollbar{
    display:  none;
  }
  .foot{
    border-top: 1px solid #E5E5E5;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: column ;
    justify-content: center;
    align-items:center;  
    p{
      margin: 0;
    }
  }
  .loading{
    position: absolute;
    top:0;
    bottom: 0;
    width: 100%;
    z-index: 99;
    display: flex;
    justify-content: center;  
    align-items:center;  
    background: rgba(255, 255, 255, 0.8)
  }
}
</style>
